<script type="text/javascript" src="__PUBLIC__/js/jquery/lin_nav.js"></script>
                        	<div class="jqueryTitle mt5">
                            	<span>实现原理</span>
                            </div>
                            <div class="p15">
                            	nav导航效果也是个满基础的jquery入门插件，通过监听各元素的事件改变其状态然后通过siblings遍历其兄弟节点改变成相反属性。
                            </div>
                            
                        	<div class="jqueryTitle mt5">
                            	<span>相关参数</span>
                            </div>
                            <div class="p15">
                            	<table cellpadding="0" cellspacing="0" class="jqueryAttr">
                                	<thead>
                                    	<tr>
                                        	<th>参数名</th>
                                            <th>参数说明</th>
                                        </tr>
                                    </thead>
                                    <tbody>
		<tr>
        	<td>childObj</td>
            <td>子元素对象:默认.lin_child</td>
        </tr>
        <tr>
        	<td>parentObj</td>
            <td>父元素对象:默认.lin_parent</td>
        </tr>
        <tr>
        	<td>currentClass</td>
            <td>当前样式:默认current</td>
        </tr>
        <tr>
        	<td>clickEvent</td>
            <td>单击事件驱动:默认false</td>
        </tr>                                 </tbody>
                                </table>
                            </div> 
                            <div class="jqueryTitle mt5">
                            	<span>演示效果</span>
                            </div>
                            <div class="p15">
                            	<p class="pt15">前期准备：头部加入jquery-1.7.2.min.js;lin_nav.js文件</p>
                            	<div class="pt15"><strong>效果一</strong></div>
                                <p>CSS</p>
                                <pre>.lin_navList{height:32px; background-color:#000000; width:550px; margin:0px auto;}
.lin_navList li.lin_parent{float:left; height:32px; line-height:33px;position:relative; margin-right:10px; display:inline; width:55px; z-index:2;}
.lin_navList li.lin_parent a.parentLink{color:#FFF; display:block; padding:0px 10px; height:32px; text-align:center;}
.lin_navList li.current a.parentLink{ background-color:#FF5500; color:#FFF;}
.lin_navList .lin_child{ background-color:#FF5500;position:absolute; top:32px; left:0px; width:180px; display:none;}
.lin_navList .childList li{float:left; margin-left:10px; display:inline;}
.lin_navList .childList li a{color:#FFFFFF;}
.lin_navList .childList li a:hover{text-decoration:underline;}</pre>
                                <p>js</p>
                                <pre>$('#demo1').lin_nav();</pre>
                            	
<div class="lin_nav" id="demo1">
             	<ul class="lin_navList">
             		<li class="lin_parent">
                		<a href="javascript:;" title="男士" class="parentLink">男士</a>
                    		<div class="lin_child">
                    			<ul class="childList">
                        			<li><a href="javascript:;" title="衬衣">衬衣</a></li>
                            		<li><a href="javascript:;" title="外套">外套</a></li>
                            		<li><a href="javascript:;" title="内衣">内衣</a></li>
                            		<li><a href="javascript:;" title="短袖">短袖</a></li>
                            		<li><a href="javascript:;" title="裤子">裤子</a></li>
                        		</ul>
                    		</div>
                	</li>
                	<li class="lin_parent">
                		<a href="javascript:;" title="女士" class="parentLink">女士</a>
                    		<div class="lin_child">
                    			<ul class="childList">
                        			<li><a href="javascript:;" title="衬衣">衬衣</a></li>
                            		<li><a href="javascript:;" title="外套">外套</a></li>
                            		<li><a href="javascript:;" title="内衣">内衣</a></li>
                            		<li><a href="javascript:;" title="短袖">短袖</a></li>
                            		<li><a href="javascript:;" title="裤子">裤子</a></li>
                        		</ul>
                    		</div>                
                	</li>
                	<li class="lin_parent">
                		<a href="javascript:;" title="小孩" class="parentLink">小孩</a>
                    		<div class="lin_child">
                    			<ul class="childList">
                        			<li><a href="javascript:;" title="衬衣">衬衣</a></li>
                            		<li><a href="javascript:;" title="外套">外套</a></li>
                            		<li><a href="javascript:;" title="内衣">内衣</a></li>
                            		<li><a href="javascript:;" title="短袖">短袖</a></li>
                            		<li><a href="javascript:;" title="裤子">裤子</a></li>
                        		</ul>
                    		</div>                
                	</li>
                	<li class="lin_parent">
                		<a href="javascript:;" title="妇女" class="parentLink">妇女</a>
                    		<div class="lin_child">
                    			<ul class="childList">
                        			<li><a href="javascript:;" title="衬衣">衬衣</a></li>
                            		<li><a href="javascript:;" title="外套">外套</a></li>
                            		<li><a href="javascript:;" title="内衣">内衣</a></li>
                            		<li><a href="javascript:;" title="短袖">短袖</a></li>
                            		<li><a href="javascript:;" title="裤子">裤子</a></li>
                        		</ul>
                    		</div>                
                	</li>                                        
             	</ul>
             </div>  
             
             <div class="pt15"><strong>效果二(单击)</strong></div>
                                <p>CSS</p>
                                <pre>.lin_navList2{background:#000; width:50px;height:132px;}
.lin_navList2 li.lin_parent{height:33px; line-height:33px;position:relative; float:left; clear:both; width:50px;}
.lin_navList2 li.lin_parent a.parentLink{color:#FFF; display:block; padding:0px 10px; height:33px; text-align:center;line-height:33px;}
.lin_navList2 li.current a.parentLink{ background-color:#FF5500; color:#FFF;}
.lin_navList2 .lin_child{ background-color:#FF5500;display:none; position:absolute; left:50px; top:0px;}
.lin_navList2 .childList li{text-align:center;height:33px; line-height:33px; padding-left:10px; width:40px;}
.lin_navList2 .childList li a{color:#FFFFFF;}
.lin_navList2 .childList li a:hover{text-decoration:underline;}</pre>
                                <p>js</p>
                                <pre>$("#demo2").lin_nav({clickEvent:true});</pre>                              

<div class="lin_nav" id="demo2">
             	<ul class="lin_navList2">
             		<li class="lin_parent">
                		<a href="javascript:;" title="男士" class="parentLink">男士</a>
                    		<div class="lin_child">
                    			<ul class="childList">
                        			<li><a href="javascript:;" title="衬衣">衬衣</a></li>
                            		<li><a href="javascript:;" title="外套">外套</a></li>
                        		</ul>
                    		</div>
                	</li>
                	<li class="lin_parent">
                		<a href="javascript:;" title="女士" class="parentLink">女士</a>
                    		<div class="lin_child">
                    			<ul class="childList">
                        			<li><a href="javascript:;" title="衬衣">衬衣</a></li>
                            		<li><a href="javascript:;" title="外套">外套</a></li>
                            		<li><a href="javascript:;" title="内衣">内衣</a></li>
                        		</ul>
                    		</div>                
                	</li>
                	<li class="lin_parent">
                		<a href="javascript:;" title="小孩" class="parentLink">小孩</a>
                    		<div class="lin_child">
                    			<ul class="childList">
                        			<li><a href="javascript:;" title="衬衣">衬衣</a></li>
                            		<li><a href="javascript:;" title="外套">外套</a></li>
                        		</ul>
                    		</div>                
                	</li>
                	<li class="lin_parent">
                		<a href="javascript:;" title="妇女" class="parentLink">妇女</a>
                    		<div class="lin_child">
                    			<ul class="childList">
                        			<li><a href="javascript:;" title="衬衣">衬衣</a></li>
                        		</ul>
                    		</div>                
                	</li>                                        
             	</ul>
              </div>                                                               
                                
                            </div>  

                            <div class="clearfix pt40 pb40">
                            	<a href="http://url.cn/NiSxof" title="《{$data.title}》源代码下载" class="jqueryDown" rel="nofollow" target="_blank">《{$data.title}》源代码下载</a>
                            </div>   
                        
 
 <script type="text/javascript">
 $(function(){
	 			$('#demo1').lin_nav();
		$("#demo2").lin_nav({clickEvent:true});
	});
 </script>   
